<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- <link rel="stylesheet" href="/docs/css/bootstrap.min.css" /> -->
  <!-- <link rel="stylesheet" href="/css/bootstrap-responsive.min.css" /> -->
  <link rel="stylesheet" href="/docs/css/bootstrap-flatly.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/css/site.css" />
  <link rel="stylesheet" href="//ui-grid.info/release/ui-grid-unstable.min.css" />
  <script>
    ((window.gitter = {}).chat = {}).options = {
      room: 'angular-ui/ui-grid'
    };
  </script>
  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
</head>
<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">UI Grid</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="/docs/#/api"><i class="fa fa-book fa-fw"></i> API</a></li>
          <li><a href="/docs/#/tutorial"><i class="fa fa-book fa-fw"></i> Tutorial</a></li>
          <li><a href="/customizer/"><i class="fa fa-wrench fa-fw"></i> Customizer</a></li>
        </ul>
        <div class="navbar-header navbar-right">
          <p class="navbar-text hidden-phone">
            <a class="nav-gitter-link" href="https://gitter.im/angular-ui/ui-grid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"
              style="">
              <img class="nav-gitter-image" src="https://badges.gitter.im/Join%20Chat.svg"/>
              <span class="sr-only">Gitter Join Chat</span>
            </a>
            <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-grid&type=watch&count=true"
                  allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
            <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-grid&type=fork&count=true"
                  allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
          </p>
        </div>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div class="main-content">
  <div class="intro">
    <div class="jumbotron">
      <div class="description">
        <h1 class="text-center">Angular UI Grid</h1>
        <p class="lead text-center">A data grid for <strong>AngularJS</strong>; part of the <strong><a href="http://angular-ui.github.io/">AngularUI</a></strong> suite</p>
        <ul class="benefits text-left">
          <li>Native AngularJS implementation, no jQuery</li>
          <li>Performs well with large data sets; even <strong>10,000+</strong> rows</li>
          <li>Plugin architecture allows you to use only the features you need</li>
        </ul>
        <p class="btn-group2 text-center">
          <a class="btn btn-success btn-large" href="https://github.com/angular-ui/ui-grid" title="Code on Github">
            <i class="fa fa-github fa-fw"></i>
              Code on Github
          </a>

          <a class="btn btn-danger btn-large" href="https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release" title="Download <%= version %>">
            <i class="fa fa-download fa-fw"></i>
            <!-- Download <small>( <%= stable_version %> / <%= version %> )</small> --> <!-- TODO(c0bra): note: not showing stable version till 3.0.0 is released -->

            Download <small>( <%= version %> )</small>
          </a>

          <a class="btn btn-success btn-large" href="/docs/#/tutorial" title="Tutorial">
            <i class="fa fa-book fa-fw"></i>
            Tutorial
          </a>
        </p>
        <div class="row">
          <div class="col-sm-6 text-left">
            <h4>Bower</h4>
            <pre>bower install angular-ui-grid</pre>
          </div>
          <div class="col-sm-6 text-left">
            <h4>NPM</h4>
            <pre>npm install angular-ui-grid</pre>
          </div>
        </div>
        <br>
        <div class="alert alert-info">
          <h3 class="text-center">
            UI Grid <strong>v3.0.0</strong> has been released!  Check out the <a class="info-link" href="https://github.com/angular-ui/ui-grid">project on GitHub</a> for more information.
          </h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <div class="feature">
          <div class="feature-heading">
            <i class="fa fa-4x fa-wrench"></i>
          </div>
          <h4 class="feature-heading">Configurable</h4>
          <ul>
            <li>Customizeable templates</li>
            <li>Change look and feel with CSS and the <a href="/customizer">customizer</a></li>
            <li>Drop-in plugin system</li>
          </ul>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <div class="feature">
          <div class="feature-heading">
            <i class="fa fa-4x fa-gear"></i>
          </div>
          <h4 class="feature-heading">Standard Features</h4>
          <ul>
            <li>Sorting</li>
            <li>Filtering</li>
            <li>User interaction</li>
            <li>e2e testing integration</li>
          </ul>
          <h4 class="feature-heading">Advanced Features</h4>
          <ul>
            <li>Virtualization</li>
            <li>Column pinning</li>
            <li>Grouping</li>
            <li>Edit in place</li>
            <li>Expandable rows</li>
            <li>Internationalisation</li>
          </ul>
          <h4 class="feature-heading">Third Party Features</h4>
          <ul>
            <li><a href="/docs/#/tutorial/299_third_party_features">List of Third Party Features</a></li>
          </ul>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-lg-6">
        <div class="feature" ng-app="demo">
          <div class="feature-heading">
            <i class="fa fa-4x fa-certificate"></i>
          </div>
          <h4 class="feature-heading">Basic Example</h4>
          <div class="grid" ui-grid="gridOptionsSimple"></div>

          <h4 class="feature-heading">Complex Example</h4>
          <div class="grid" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns></div>
        </div>
      </div>
    </div>
  </div>

  <br>
  <br>
  <br>

  <div class="container-fluid">
    <div class="row text-center">
      <small class="muted">Special thanks to <a href="http://saucelabs.com">Sauce Labs</a> and <a href="http://browserstack.com">BrowserStack</a> for providing their testing platforms to open source projects for free.</small>
    </div>
  </div>

  <br>
  <br>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
  <script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>
  <script>
    angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.resizeColumns'])
    .run(function($rootScope, uiGridConstants) {
      $rootScope.gridOptionsSimple = {
        data: [
          {
              "name": "Ethel Price",
              "gender": "female",
              "company": "Enersol"
          },
          {
              "name": "Claudine Neal",
              "gender": "female",
              "company": "Sealoud"
          },
          {
              "name": "Beryl Rice",
              "gender": "female",
              "company": "Velity"
          },
          {
              "name": "Wilder Gonzales",
              "gender": "male",
              "company": "Geekko"
          },
          {
              "name": "Georgina Schultz",
              "gender": "female",
              "company": "Suretech"
          },
          {
              "name": "Carroll Buchanan",
              "gender": "male",
              "company": "Ecosys"
          },
          {
              "name": "Valarie Atkinson",
              "gender": "female",
              "company": "Hopeli"
          },
          {
              "name": "Schroeder Mathews",
              "gender": "male",
              "company": "Polarium"
          },
          {
              "name": "Lynda Mendoza",
              "gender": "female",
              "company": "Dogspa"
          },
          {
              "name": "Sarah Massey",
              "gender": "female",
              "company": "Bisba"
          },
          {
              "name": "Robles Boyle",
              "gender": "male",
              "company": "Comtract"
          },
          {
              "name": "Evans Hickman",
              "gender": "male",
              "company": "Parleynet"
          },
          {
              "name": "Dawson Barber",
              "gender": "male",
              "company": "Dymi"
          },
          {
              "name": "Bruce Strong",
              "gender": "male",
              "company": "Xyqag"
          },
          {
              "name": "Nellie Whitfield",
              "gender": "female",
              "company": "Exospace"
          },
          {
              "name": "Jackson Macias",
              "gender": "male",
              "company": "Aquamate"
          },
          {
              "name": "Pena Pena",
              "gender": "male",
              "company": "Quarx"
          },
          {
              "name": "Lelia Gates",
              "gender": "female",
              "company": "Proxsoft"
          },
          {
              "name": "Letitia Vasquez",
              "gender": "female",
              "company": "Slumberia"
          },
          {
              "name": "Trevino Moreno",
              "gender": "male",
              "company": "Conjurica"
          }
        ]
      };

      $rootScope.gridOptionsComplex = {
        enableFiltering: true,
        showGridFooter: true,
        showColumnFooter: true,
        columnDefs: [
          { name: 'name', aggregationType: uiGridConstants.aggregationTypes.count, width: 150 },
          { name: 'gender', filter: { term: 'male' }, width: 150, enableCellEdit: false,
            cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
              if (grid.getCellValue(row,col) === 'male') {
                return 'blue';
              } else if (grid.getCellValue(row,col) === 'female') {
                return 'pink';
              }
            }
          },
          { name: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, width: 100 },
          { name: 'company', enableFiltering: false, width: 200 }
        ],
        data: [
          {
              "name": "Ethel Price",
              "gender": "female",
              "company": "Enersol",
              "age": 25
          },
          {
              "name": "Claudine Neal",
              "gender": "female",
              "company": "Sealoud",
              "age": 19
          },
          {
              "name": "Beryl Rice",
              "gender": "female",
              "company": "Velity",
              "age": 44
          },
          {
              "name": "Wilder Gonzales",
              "gender": "male",
              "company": "Geekko",
              "age": 26
          },
          {
              "name": "Georgina Schultz",
              "gender": "female",
              "company": "Suretech",
              "age": 53
          },
          {
              "name": "Carroll Buchanan",
              "gender": "male",
              "company": "Ecosys",
              "age": 64
          },
          {
              "name": "Valarie Atkinson",
              "gender": "female",
              "company": "Hopeli",
              "age": 35
          },
          {
              "name": "Schroeder Mathews",
              "gender": "male",
              "company": "Polarium",
              "age": 29
          },
          {
              "name": "Lynda Mendoza",
              "gender": "female",
              "company": "Dogspa",
              "age": 49
          },
          {
              "name": "Sarah Massey",
              "gender": "female",
              "company": "Bisba",
              "age": 40
          },
          {
              "name": "Robles Boyle",
              "gender": "male",
              "company": "Comtract",
              "age": 32
          },
          {
              "name": "Evans Hickman",
              "gender": "male",
              "company": "Parleynet",
              "age": 38
          },
          {
              "name": "Dawson Barber",
              "gender": "male",
              "company": "Dymi",
              "age": 21
          },
          {
              "name": "Bruce Strong",
              "gender": "male",
              "company": "Xyqag",
              "age": 61
          },
          {
              "name": "Nellie Whitfield",
              "gender": "female",
              "company": "Exospace",
              "age": 54
          },
          {
              "name": "Jackson Macias",
              "gender": "male",
              "company": "Aquamate",
              "age": 49
          },
          {
              "name": "Pena Pena",
              "gender": "male",
              "company": "Quarx",
              "age": 25
          },
          {
              "name": "Lelia Gates",
              "gender": "female",
              "company": "Proxsoft",
              "age": 54
          },
          {
              "name": "Alfred Oscar",
              "gender": "male",
              "company": "Transprop",
              "age": 34
          },
          {
              "name": "John Alfred",
              "gender": "male",
              "company": "Haymans",
              "age": 70
          },
          {
              "name": "Leonie Warren",
              "gender": "female",
              "company": "Hilltop",
              "age": 25
          },
          {
              "name": "Belinda Gosford",
              "gender": "female",
              "company": "Archison",
              "age": 42
          },
          {
              "name": "Tracey Misoni",
              "gender": "female",
              "company": "Verizona",
              "age": 34
          },
          {
              "name": "Trevino Moreno",
              "gender": "male",
              "company": "Conjurica",
              "age": 31
          }
        ]
      };
    });
  </script>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-46391685-1', 'auto');
    ga('send', 'pageview');

  </script>
</body>
</html>
